<template>
  <el-row>
    <el-cascader
      v-model="cascaderValue"
      ref="cascaderRef"
      @change="change"
      placeholder="试试搜索:"
      :options="options"
      filterable
      change-on-select
      :props="cdProps"
    ></el-cascader>
  </el-row>
</template>

<script>
  export default {
    name: "FtDept",
    props: ['tooltipContent', 'values', 'orgId'],
    mounted() {
      this.loadOrgAndDepts();
    },
    data() {
      return {
        cascaderValue: '',
        options: [],
        cdProps: {value: 'deptId', label: 'deptName', children: 'children'}
      }
    },
    methods: {
      loadOrgAndDepts() {
        if (this.options.length == 0 && this.orgId) {
          this.$http.get('/joys-rest/joys-master-data/dept/byOrgAndDept/' + this.orgId).then(resp => {
            this.options = resp.body
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }

      },
      change() {
        var value = this.cascaderValue[this.cascaderValue.length - 1]
        this.$emit('input', value)
        this.$emit('change', value)
      },
      labelKey() {
        return this.aliasLabel || 'label';
      },
      valueKey() {
        return this.aliasValue || 'value';
      },
      childrenKey() {
        return this.aliasChildren || 'children';
      },
      currentLabels(currentValue) {
        if (!currentValue) {
          return "";
        }
        let options = this.options;
        if (options.length == 0) {
          this.loadOrgAndDepts();
          options = this.options;
        }
        var vm = this;
        let labels = [];
        currentValue.forEach(value => {
          const targetOption = options && options.filter(option => option[vm.valueKey()] === value)[0];
          if (targetOption) {
            labels.push(targetOption[vm.labelKey()]);
            options = targetOption[vm.childrenKey()];
          }
        });
        return labels.join('/');
      }
    }
  }

</script>

